<template>
    <div class="container" v-loading="isLoading">
        <div class="video-tree">
            <div class="video-tree-input">
                <el-input v-model="monitorSearchValue" placeholder="搜索监控通道"></el-input>
                <el-button @click="search" type="primary">搜索</el-button>
            </div>
            <div class="video-device">
                <span class="video-sum-device">设备总数：{{monitorTotalList.length}}台</span><span class="video-device-list">
                    <div style="color: #70B603">在线：{{monitorTotalList.length}}台</div>
                    <div style="color: #D9001B">异常：0台</div>
                    <div style="color: #999">离线：0台</div>
                </span>
            </div>
            <div class="monitor-ul">
                <div @click="monitorBtn(item)"
                    :class="monitorObj[item.camera_id] ? 'monitor-item-active':'monitor-item'"
                    v-for="(item, $index) in monitorList" :key="this">{{item.name}}</div>
            </div>
        </div>
        <div class="video-play">
            <div class="video-play-select">
                <div class="select-main">方案选择：
                    <el-select v-model="planId" placeholder="请选择方案" @change="checkPlan">
                        <el-option label="请选择方案" value=""></el-option>
                        <el-option v-for="(item, $index) in planList" :key="item.id" :label="item.name"
                            :value="item.id">
                            <div style="display: flex;justify-content: space-between;align-items: center;">
                                <span>{{ item.name }}</span>
                                <span style="display: flex;align-items: center;">
                                    <i style="cursor: pointer;font-size: 18px;margin-left: 10px;"
                                        @click.stop="editPlan(item, $index)" class="el-icon-edit-outline"></i>
                                    <i style="cursor: pointer;font-size: 18px;margin-left: 10px;"
                                        @click.stop="delPlan(item, $index)" class="el-icon-delete"></i>
                                </span>
                            </div>
                        </el-option>
                    </el-select>
                </div>
                <el-button @click="savePlan" type="primary">{{!planInfo ? '保存方案': '更新方案'}}</el-button>
            </div>
            <div class="video-list" id="video-list">
                <div id="division"
                    :class="segmentation == 4 ? 'division-two': segmentation == 9 ? 'division-three': segmentation == 16 ? 'division-four':'division-five'">
                    <div v-loading="item && item.isLoading === true"
                        :class="[monitorIndex === $index ?'monitor-item-active':'']"
                        v-for="(item, $index) in monitorArr" v-bind:key=$index @click="monitorItemBtn($index, 4)"
                        @dblclick="monitorCheck(item)">
                        <div class="division-item-tips" v-show="!item || !item.camera_id">单击选中分屏，双击选中监控点</div>
                        <video :id="'video'+$index" class="video-js vjs-default-skin vjs-big-play-centered"></video>
                        <div class="video-error" @click.stop="retry(item, $index, 'click')"
                            v-if="item && item.isLoading === 'error'">播放失败，点击重试</div>
                    </div>
                </div>
                <div class="monitor" id="monitor" v-show="isShow" v-loading="monitorLoading === true">
                    <video id="monitor0" class="video-js vjs-default-skin vjs-big-play-centered"></video>
                    <i class="el-icon-close" @click="closeMonitor"></i>
                    <div class="monitor-error" @click="monitorRetry" v-if="monitorLoading === 'error'">播放失败，点击重试</div>
                </div>
            </div>
            <div class="picture-segmentation">
                <el-popover placement="top-start" title="" width="200" trigger="hover">
                    <div class="division-main">
                        <div class="division" @click="segmentationBtn(4)">
                            <div class="division-two">
                                <div v-for="item in 4"></div>
                            </div>
                        </div>
                        <div class="division" @click="segmentationBtn(9)">
                            <div class="division-three">
                                <div v-for="item in 9"></div>
                            </div>
                        </div>
                        <div class="division" @click="segmentationBtn(16)">
                            <div class="division-four">
                                <div v-for="item in 16"></div>
                            </div>
                        </div>
                        <div class="division" @click="segmentationBtn(25)">
                            <div class="division-five">
                                <div v-for="item in 25"></div>
                            </div>
                        </div>
                    </div>
                    <div slot="reference" class="segmentation-icon">
                        <i class="el-icon-s-grid"></i>
                        <div>画面分割</div>
                    </div>
                </el-popover>
            </div>
        </div>
        <el-dialog :title="planEdit ? '修改方案' : '新增方案'" :visible.sync="dialogVisible" width="30%"
            v-loading="dialogLoading">
            <el-form :model="plan" ref="plan" label-width="100px">
                <el-form-item label="方案名称" prop="name" :rules="[
                        { required: true, message: '请输入方案名称', trigger: 'blur' }
                    ]">
                    <el-input v-model="plan.name" placeholder="请输入方案名称"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="savePlanConfirm('plan')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import hls from 'hls.js';
    export default {
        data() {
            return {
                isLoading: false,
                monitorTotalList: [],
                monitorList: [],
                monitorObj: {},
                monitorSearchValue: '',
                planList: [],
                monitorArr: [],
                player: [],
                monitorIndex: '',
                segmentation: 4,
                isShow: false,
                planEdit: false,
                dialogVisible: false,
                plan: {
                    name: ''
                },
                planInfo: '',
                planIndex: 0,
                hideDropdown: false,
                dialogLoading: false,
                monitorer: null,
                monitorLoading: false,
                monitorId: '',
                live_addr: '',
                planId: ''
            }
        },
        created() {
            // this.isLoading = true;
            // 监控点列表
            this.monitorArr = [
                { isLoading: false, camera_id: null, live_addr: null },
                { isLoading: false, camera_id: null, live_addr: null },
                { isLoading: false, camera_id: null, live_addr: null },
                { isLoading: false, camera_id: null, live_addr: null }
            ];
            this.player = [null, null, null, null];
            let monitor = this.$http.get('api/v1/security/monitor')
                .then((res) => {
                    this.monitorList = res.data.splice(0,5);
                    this.monitorTotalList = res.data.splice(0,5);
                })
                .catch(() => { })
            // 方案列表
            let plan = this.$http.get('/api/v1/security/plan/?type=yingshiyun')
                .then((res) => {
                    this.planList = res.data;
                })
                .catch(() => { })
            // this.isLoading = true;
            this.$http.requestAll([monitor, plan])
                .then(() => {
                    this.isLoading = false;
                })
                .catch(() => {
                    this.isLoading = false;
                })
        },
        beforeDestroy() {
            this.player.forEach((v, i) => {
                if (v) {
                    this.pausemix('', this.player, i);
                }
            })
            if (this.monitorer) {
                this.pausemix('');
            }
        },
        methods: {
            // 搜索
            search() {
                if (this.monitorSearchValue) {
                    let arr = [];
                    this.monitorTotalList.forEach((v, i) => {
                        if (v.name.indexOf(this.monitorSearchValue) != -1) {
                            arr.push(v);
                        }
                    })
                    this.monitorList = arr;
                } else {
                    this.monitorList = JSON.parse(JSON.stringify(this.monitorTotalList));
                }
            },
            initFlvPlayer(centeredVideo, live_addr, monitorIndex, callback, hd) {
                let _that = this;
                return new Promise((resolve, reject) => {
                    if (hls.isSupported()) {
                        let Hls = new hls();
                        Hls.attachMedia(centeredVideo);
                        Hls.on(hls.Events.MEDIA_ATTACHED, function () {
                            Hls.loadSource(live_addr.m3u8);
                            Hls.on(hls.Events.MANIFEST_PARSED, function (event, data) {
                                setTimeout(() => {
                                    centeredVideo.play();
                                }, 10);
                                if (hd) {
                                    _that.$set(_that, 'monitorLoading', false);
                                } else {
                                    _that.$set(_that.monitorArr[monitorIndex], 'isLoading', false);
                                }
                            });
                        });
                        Hls.on(hls.Events.ERROR, function (event, data) {
                            if (data.fatal) {
                                switch (data.type) {
                                    case 'networkError':
                                        if (hd) {
                                            _that.monitorRetry();
                                        } else {
                                            _that.retry(live_addr, monitorIndex);
                                        }
                                        break;
                                    default:
                                        if (hd) {
                                            _that.pausemix(centeredVideo);
                                            _that.$set(_that, 'monitorLoading', 'error');
                                        } else {
                                            _that.pausemix(centeredVideo, _that.player, monitorIndex);
                                            _that.$set(_that.monitorArr[monitorIndex], 'isLoading', 'error');
                                        }
                                        break;
                                }
                            }
                        })
                        resolve(Hls);
                    }
                })
            },
            // 视频销毁
            pausemix(centeredVideo, flvPlayer, index) {
                if (!flvPlayer) {
                    if (centeredVideo !== '') centeredVideo.pause();
                    this.monitorer.destroy();
                    this.monitorer = null;
                } else {
                    if (flvPlayer[index]) {
                        if (centeredVideo !== '') centeredVideo.pause();
                        flvPlayer[index].destroy();
                        this.$set(this.player, `${index}`, null);
                        // console.log(centeredVideo.pause, index, flvPlayer[index])
                    }
                }
            },
            // 选择监控点
            monitorBtn(item) {
                console.log(item)
                if (this.monitorIndex !== '') {
                    //是否选中，没选中直接填充进右侧监控区域
                    if (!this.monitorObj[item.camera_id]) {
                        // 没有选中判断监控区域是否已有其他监控点
                        if (this.monitorArr[this.monitorIndex] && this.monitorArr[this.monitorIndex].camera_id) {
                            let centeredVideo = document.getElementById(`video${this.monitorIndex}`);
                            this.$set(this.monitorObj, `${this.monitorArr[this.monitorIndex].camera_id}`, false);
                            this.pausemix(centeredVideo, this.player, this.monitorIndex);
                            this.$set(this.monitorObj, `${item.camera_id}`, true);
                            this.$set(this.monitorArr, `${this.monitorIndex}`, { isLoading: true, camera_id: item.camera_id, live_addr: item.live_addr });
                            this.initFlvPlayer(centeredVideo, item.live_addr, this.monitorIndex, () => { this.monitorArr[this.monitorIndex].isLoading = false; })
                                .then((res) => {
                                    this.player[this.monitorIndex] = res;
                                }).catch(() => { })
                        } else {
                            let centeredVideo = document.getElementById(`video${this.monitorIndex}`);
                            this.$set(this.monitorObj, `${item.camera_id}`, true);
                            this.$set(this.monitorArr, `${this.monitorIndex}`, { isLoading: true, camera_id: item.camera_id, live_addr: item.live_addr });
                            this.initFlvPlayer(centeredVideo, item.live_addr, this.monitorIndex, () => { this.monitorArr[this.monitorIndex].isLoading = false; })
                                .then((res) => {
                                    this.player[this.monitorIndex] = res;
                                }).catch(() => { })
                        }
                    } else {
                        if (this.monitorArr[this.monitorIndex] && this.monitorArr[this.monitorIndex].camera_id) {
                            // 已选中，如果当前选中的监控点与右侧监控区域一致，则取消
                            if (item.camera_id === this.monitorArr[this.monitorIndex].camera_id) {
                                let centeredVideo = document.getElementById(`video${this.monitorIndex}`);
                                this.$set(this.monitorObj, `${item.camera_id}`, false);
                                this.$set(this.monitorArr, `${this.monitorIndex}`, { isLoading: false, camera_id: null, live_addr: null });
                                this.pausemix(centeredVideo, this.player, this.monitorIndex);
                            } else {
                                // 如果当前选中的监控点与右侧监控区域不一致，则循环找出一样的监控点，取消原来的移至新,并清除当前监控点，重新加载
                                let index = this.monitorArr.findIndex((v) => {
                                    if (v && v.camera_id) {
                                        return v.camera_id === item.camera_id;
                                    }
                                })
                                let centeredVideo = document.getElementById(`video${index}`);
                                let centeredVideo1 = document.getElementById(`video${this.monitorIndex}`);
                                this.pausemix(centeredVideo, this.player, index);
                                this.pausemix(centeredVideo1, this.player, this.monitorIndex);
                                this.$set(this.monitorObj, `${this.monitorArr[this.monitorIndex].camera_id}`, false);
                                this.$set(this.monitorArr, `${index}`, { isLoading: false, camera_id: null, live_addr: null });
                                this.$set(this.monitorArr, `${this.monitorIndex}`, { isLoading: true, camera_id: item.camera_id, live_addr: item.live_addr });
                                let player = this.initFlvPlayer(centeredVideo1, item.live_addr, this.monitorIndex, () => { this.monitorArr[this.monitorIndex].isLoading = false; })
                                    .then((res) => {
                                        this.player[this.monitorIndex] = res;
                                    }).catch(() => { });
                            }
                        } else {
                            // 如果当前选中的监控点与右侧监控区域不一致，则循环找出一样的监控点，取消原来的移至新
                            let index = this.monitorArr.findIndex((v) => {
                                if (v && v.camera_id) {
                                    return v.camera_id === item.camera_id;
                                }
                            })
                            let centeredVideo = document.getElementById(`video${index}`);
                            this.pausemix(centeredVideo, this.player, index);
                            // this.$set(this.monitorObj, `${this.monitorArr[this.monitorIndex].camera_id}`, false);
                            this.$set(this.monitorArr, `${index}`, { isLoading: false, camera_id: null, live_addr: null });
                            this.$set(this.monitorArr, `${this.monitorIndex}`, { isLoading: true, camera_id: item.camera_id, live_addr: item.live_addr });
                            let centeredVideo1 = document.getElementById(`video${this.monitorIndex}`);
                            let player = this.initFlvPlayer(centeredVideo1, item.live_addr, this.monitorIndex, () => { this.monitorArr[this.monitorIndex].isLoading = false; })
                                .then((res) => {
                                    this.player[this.monitorIndex] = res;
                                }).catch(() => { });
                        }
                    }
                } else {
                    this.$message.warning('请选择右侧视频放置区域');
                }
            },
            // 画面分割
            segmentationBtn(val) {
                if (val > this.segmentation) {
                    for (let i = 0; i < val - this.segmentation; i++) {
                        this.monitorArr.push({
                            isLoading: false,
                            camera_id: null,
                            live_addr: null
                        });
                        this.player.push(null);
                    }
                } else if (val < this.segmentation) {
                    for (let i = this.segmentation - val - 1; i < this.segmentation; i++) {
                        if (this.monitorArr[i] && this.monitorArr[i].camera_id) {
                            this.$set(this.monitorObj, `${this.monitorArr[i].camera_id}`, false);
                            this.$set(this.monitorArr, `${i}`, { isLoading: false, camera_id: null, live_addr: null });
                            let centeredVideo = document.getElementById(`video${i}`);
                            this.pausemix(centeredVideo, this.player, i);
                        }
                    }
                    this.monitorArr = this.monitorArr.splice(0, val);
                }
                this.monitorIndex = '';
                this.segmentation = val;
            },
            // 选择画面
            monitorItemBtn(index) {
                this.monitorIndex = index;
            },
            // 播放失败，重新播放
            retry(live_addr, index, type) {
                if(type === 'click') this.monitorIndex = index;
                this.$set(this.monitorArr[index], 'isLoading', true);
                let centeredVideo = document.getElementById(`video${index}`);
                this.initFlvPlayer(centeredVideo, live_addr, index, () => { this.monitorArr[this.monitorIndex].isLoading = false; })
                    .then((res) => {
                        this.player[this.monitorIndex] = res;
                    }).catch(() => { })
            },
            // 双击选中放大
            monitorCheck(item) {
                if (item && item.camera_id) {
                    this.live_addr = item.live_addr;
                    this.isShow = true;
                    this.monitorLoading = true;
                    this.$nextTick(() => {
                        let centeredVideo = document.getElementById('monitor0');
                        this.initFlvPlayer(centeredVideo, item.live_addr, 0, () => { this.monitorLoading = false }, 'hd').then((res) => {
                            this.monitorer = res;
                        }).catch(() => { });
                    })
                }
            },
            closeMonitor() {
                if (this.isShow && this.monitorer) {
                    let centeredVideo = document.getElementById('monitor0');
                    this.pausemix(centeredVideo);
                    this.isShow = false;
                    this.monitorLoading = false;
                } else {
                    this.isShow = false;
                    this.monitorLoading = false;
                }
            },
            monitorRetry() {
                this.monitorLoading = true;
                this.$nextTick(() => {
                    let centeredVideo = document.getElementById('monitor0');
                    this.initFlvPlayer(centeredVideo, this.live_addr, 0, () => { this.monitorLoading = false }, 'hd').then((res) => {
                        this.monitorer = res;
                    }).catch(() => { });
                })
            },
            // 选择方案
            checkPlan(id) {
                let item = this.planList.find((v) => {
                    return v.id == id;
                })
                if (item) {
                    this.planInfo = item;
                    // this.planIndex = index;
                    // this.hideDropdown = true;
                    this.monitorIndex = '';
                    for (let i = 0; i < this.segmentation; i++) {
                        if (this.monitorArr[i] && this.monitorArr[i].camera_id) {
                            this.$set(this.monitorObj, `${this.monitorArr[i].camera_id}`, false);
                            this.$set(this.monitorArr, `${i}`, { camera_id: null, isLoading: false, live_addr: null });
                            let centeredVideo = document.getElementById(`video${i}`);
                            this.pausemix(centeredVideo, this.player, i);
                        }
                    }
                    if (item.monitor_list) {
                        this.segmentation = item.monitor_list ? item.monitor_list.length : 4;
                        this.monitorArr.length = this.segmentation;
                        this.player.length = this.segmentation;
                        this.$nextTick(() => {
                            item.ysy_url.forEach((v, i) => {
                                if (v !== "None" && v && v.m3u8) {
                                    let live_addr = {
                                        flv: v.flv,
                                        m3u8: v.m3u8,
                                        rtmp: v.rtmp
                                    }
                                    this.$set(this.monitorArr, `${i}`, { isLoading: true, camera_id: v.camera_id, live_addr: live_addr });
                                    this.$set(this.monitorObj, `${v.camera_id}`, true);
                                    let centeredVideo = document.getElementById(`video${i}`);
                                    this.initFlvPlayer(centeredVideo, live_addr, i, () => { this.monitorArr[i].isLoading = false; }).then((res) => {
                                        this.player[i] = res;
                                    }).catch(() => { });
                                }
                            })
                        })
                    }
                }
            },
            // 编辑方案名称
            editPlan(item, index) {
                this.hideDropdown = false;
                this.dialogVisible = true;
                this.planEdit = true;
                this.planInfo = item;
                this.planIndex = index;
                this.plan.name = item.name;
                this.$nextTick(() => {
                    this.$refs.plan.clearValidate();
                })
            },
            // 新增或修改方案
            savePlanConfirm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let bool = this.planList.some(v => {
                            return v.name === this.plan.name;
                        })
                        if (bool) {
                            this.$message.warning(`${this.plan.name}已存在`);
                            return false;
                        }
                        if (this.planEdit) {
                            this.dialogLoading = true;
                            this.$http.patch(`/api/v1/security/plan/${this.planInfo.id}`, {
                                name: this.plan.name,
                            })
                                .then(() => {
                                    this.$message.success('修改成功');
                                    this.planList[this.planIndex].name = this.plan.name;
                                    this.dialogLoading = false;
                                    this.dialogVisible = false;
                                })
                                .catch(() => {
                                    this.dialogLoading = false;
                                })
                        } else {
                            this.savePlanFun('post');
                        }
                    }
                });
            },
            savePlanFun(val) {
                let temp = 1;
                switch (this.segmentation) {
                    case 4:
                        temp = 1;
                        break;
                    case 9:
                        temp = 2;
                        break;
                    case 16:
                        temp = 3;
                        break;
                    case 25:
                        temp = 4;
                        break;
                }
                this.dialogLoading = true;
                let arr = [];
                for (let i = 0; i < this.monitorArr.length; i++) {
                    if (this.monitorArr[i] && this.monitorArr[i].camera_id) arr.push(this.monitorArr[i].camera_id);
                    else arr.push(null)
                }
                if (val === 'post') {
                    this.$http[val]('/api/v1/security/plan/', {
                        name: this.plan.name,
                        plan: temp,
                        monitor_list: arr
                    })
                        .then((res) => {
                            this.$message.success('方案保存成功');
                            this.planList.push(res.data);
                            this.dialogVisible = false;
                            this.dialogLoading = false;
                        })
                        .catch(() => {
                            this.dialogLoading = false;
                        })
                } else {
                    this.$http[val](`/api/v1/security/plan/${this.planInfo.id}`, {
                        name: this.planInfo.name,
                        plan: temp,
                        monitor_list: arr
                    })
                        .then((res) => {
                            this.$message.success('方案更新成功');
                            this.dialogVisible = false;
                            this.dialogLoading = false;
                            this.$set(this.planList, `${this.planIndex}`, res.data);
                        })
                        .catch(() => {
                            this.dialogLoading = false;
                        })
                }
            },
            // 删除方案
            delPlan(item, index) {
                this.hideDropdown = false;
                this.$confirm(`确定要删除‘${item.name}’吗？`, "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    this.$http.delete(`/api/v1/security/plan/${item.id}`)
                        .then(res => {
                            this.$message.success("删除成功");
                            this.planList.splice(index, 1);
                            if (item.id === this.planInfo.id) {
                                for (let i = 0; i < this.monitorArr.length; i++) {
                                    if (this.monitorArr[i]) {
                                        this.monitorArr[i] = { isLoading: false, camera_id: null, live_addr: null };
                                        this.pausemix(this.player, i);
                                        this.$set(this.monitorObj, `${this.monitorArr[i].camera_id}`, false);
                                    }
                                }
                                this.monitorArr.length = 4;
                                this.player.length = 4;
                                this.segmentation = 4;
                                this.planInfo = '';
                                this.planId = '';
                            }
                        })
                        .catch(() => { });
                })
                    .catch(() => { });
            },
            // 保存方案
            savePlan() {
                let bool = this.monitorArr.some((item) => {
                    return item && item.camera_id;
                })
                if (!bool) {
                    this.$message.warning('请选择监控点');
                    return false;
                }
                if (this.planInfo) {
                    //更新方案
                    this.$confirm(`确定确认更新？`, "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                        .then(() => {
                            this.savePlanFun('put');
                        })
                        .catch(() => { });
                } else {
                    this.dialogVisible = true;
                    this.$nextTick(() => {
                        this.$refs.plan.resetFields();
                    })
                    this.planEdit = false;
                }
            },
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 100%;
        overflow: hidden;
        .video-tree {
            width: 300px;
            display: inline-block;
            vertical-align: top;
            height: 100%;
            overflow: auto;

            .video-tree-input {
                display: flex;
            }

            .video-device {
                width: 100%;
                display: flex;
                align-items: center;
                border: 1px solid #e5e5e5;
                box-sizing: border-box;
                margin-top: 20px;
                .video-sum-device {
                    padding: 0 12px;
                    box-sizing: border-box;
                }

                .video-device-list {
                    border-left: 1px solid #e5e5e5;
                    box-sizing: border-box;
                    padding: 6px 0;

                    &>div {
                        padding: 6px 12px;
                        box-sizing: border-box;
                    }
                }
            }

            .monitor-ul {
                width: 100%;

                .monitor-item,
                .monitor-item-active {
                    width: 100%;
                    padding: 8px 24px;
                    box-sizing: border-box;
                    cursor: pointer;
                }

                .monitor-item-active {
                    color: #409EFF;
                }
            }

            ::v-deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
                color: #409EFF;
            }
        }
        .video-play {
            width: calc(100% - 300px);
            padding-left: 20px;

            .video-play-select {
                width: 100%;
                display: flex;
                justify-content: space-between;

                .select-main {
                    ::v-deep .el-button:active {
                        color: #333;
                        border-color: #dcdfe6;
                    }

                    ::v-deep .el-button:hover {
                        color: #333;
                        border-color: #dcdfe6;
                        background-color: #fff;
                    }

                    ::v-deep .el-button:focus {
                        color: #333;
                        border-color: #dcdfe6;
                        background-color: #fff;
                    }
                }
            }

            .video-list {
                width: 100%;
                height: calc(100% - 120px);
                margin-top: 20px;
                position: relative;

                ::v-deep .monitor {
                    width: 100%;
                    height: 100%;
                    position: fixed;
                    top: 0;
                    left: 0;
                    z-index: 20002;
                    background: #000;

                    .el-icon-close {
                        position: absolute;
                        top: 20px;
                        right: 20px;
                        cursor: pointer;
                        color: #fff;
                        z-index: 2001;
                        font-size: 36px;
                    }

                    .monitor-error {
                        color: #fff;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        cursor: pointer;
                        font-size: 18px;
                    }
                }
            }

            .picture-segmentation {
                display: flex;
                justify-content: flex-end;

                .segmentation-icon {
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    &>i {
                        font-size: 40px;
                    }
                }
            }
        }
    }

    .dropdown-item,
    .dropdown-item-active {
        min-width: 150px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .dropdown-item-icons {
            display: flex;
            align-items: center;

            &>i {
                font-size: 18px;
            }

            .el-icon-delete {
                margin: 0;
            }
        }
    }

    .dropdown-item-active {
        color: #409eff;
    }

    .division {
        width: 40px;
        height: 40px;
        border-left: 1px solid #777;
        border-bottom: 1px solid #777;
        box-sizing: border-box;
        cursor: pointer;
    }

    .division-two,
    .division-three,
    .division-four,
    .division-five {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;

        &>div {
            width: 50%;
            height: 50%;
            background: #333;
            border-top: 1px solid #777;
            box-sizing: border-box;
            border-right: 1px solid #777;
            cursor: pointer;
            position: relative;
        }

        .division-item-tips {
            color: #777;
            font-size: 12px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;
            background: #333;
        }

        /* &>div::after {
            content: '\5355\51fb\9009\4e2d\5206\5c4f\ff0c\53cc\51fb\9009\4e2d\76d1\63a7\70b9';
            color: #777;
            font-size: 12px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        } */
        .monitor-item-active {
            border: 1px solid red;
        }

        .video-error {
            position: absolute;
            top: 50%;
            left: 50%;
            color: #fff;
            display: flex;
            z-index: 20001;
            transform: translate(-50%, -50%);
            cursor: pointer;
        }
    }

    .division-three {
        &>div {
            width: 33.33%;
            height: 33.33%;
        }
    }

    .division-four {
        &>div {
            width: 25%;
            height: 25%;
        }
    }

    .division-five {
        &>div {
            width: 20%;
            height: 20%;
        }
    }

    .division-main {
        display: flex;
        justify-content: space-between;

        &>div {
            &>div {
                &>div::after {
                    content: '' !important;
                }
            }
        }
    }

    ::v-deep .vjs-fluid {
        height: 100%;
        padding-top: 0;
        overflow: hidden;
    }

    ::v-deep .video-js {
        width: 100%;
        height: 100%;
    }
</style>
